<template>
  <div class="home">
    <TitleBar id="navTitleBar" title="首页" :left-arrow="false" @clickRight="onClickRight">
      <template #right>
        <!-- <van-image :width="20" :height="20" :src="require('@/assets/imgs/icon_scan.png')" /> -->
      </template>
    </TitleBar>
    <van-tabs v-model:active="active" line-height="2" :sticky="true" :offset-top="offsetTop" :swipeable="true"
      color="#3667FF" title-inactive-color="#919191" title-active-color="#3667FF" @change="changeTab">
      <van-tab :title="tab" v-for="(tab, index) in tabs" :key="index">
        <template v-if="list.length > 0">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
              <div v-for="(item, index) in list" :key="index" class="item" @click="onClickItem(item)">
                {{ item.name }}
              </div>
            </van-list>
          </van-pull-refresh>
        </template>
        <div v-else class="body">
          <van-empty style="padding-top: 40%">
            <template #description>
              <div>暂无数据.{{ listLength }}</div>
            </template>
          </van-empty>
        </div>
      </van-tab>
      <!-- <Tab title="last">one</Tab> -->
    </van-tabs>
  </div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { showToast } from 'vant';
const active = ref(0);
const tabs = ref(["推荐", "精品", "活动", "商品套餐"]);
const list = ref<any[]>([]);
const loading = ref(true);
const finished = ref(false);
const refreshing = ref(false);
const router = useRouter();
const pageIndex = ref(1);
// const total = ref(0);
const offsetTop = ref(0);

onMounted(() => {
  // tabs.value = ["推荐", "精品", "活动", "商品套餐"];
  pageIndex.value = 1;
  getList();
  offsetTop.value = document.getElementById("navTitleBar")?.offsetHeight ?? 50;
  // offsetTop.value = 50;
  console.log("mounted", offsetTop.value, active.value);
});

const listLength = computed(() => {
  return list.value.length;
});

const onLoad = () => {
  pageIndex.value += 1;
  getList();
};

const getList = () => {
  loading.value = true;
  setTimeout(() => {
    if (pageIndex.value == 1) {
      list.value = [
        { name: "detail", url: "/detail" },
        { name: "goods-list", url: "/goods-list" },
        { name: "form", url: "/form-demo" },
        { name: "图表", url: "/chart-revenue" },
        { name: "测试页", url: "/test" },
      ];
    }
    for (let i = 0; i < 10; i++) {
      list.value.push({ name: `${pageIndex.value}-${i + 1}` });
    }
    // 数据全部加载完成
    finished.value = list.value.length >= 30;
    loading.value = false;
    if (refreshing.value) {
      refreshing.value = false;
    }
  }, 200);
};
const onRefresh = () => {
  // 清空列表数据
  finished.value = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  pageIndex.value = 1;
  getList();
};
const changeTab = () => {
  pageIndex.value = 1;
  console.log(active.value);
  if (active.value == 1) {
    list.value = [];
  } else {
    getList();
  }
};

const onClickItem = (item: any) => {
  if (item.url) {
    router.push({
      path: item.url,
      query: {
        name: item.name,
      },
    });
  }
};

const onClickRight = () => {
  showToast("点击扫一扫");
};
</script>
<style lang="scss" scoped>
.home {
  width: 100vw;
  height: 100%;
  background-color: #f6f9ff;
}

.body {
  height: 100vh;
}

.item {
  margin: 12px 16px;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  background-color: #fff;
  min-height: 80px;
  display: flex;
  justify-content: center;
}
</style>